<template>
     <div class="evaluation-trend-container">
    <!-- 筛选条件卡片 -->
    <el-card class="filter-card" shadow="never">
      <div class="filter-header">
        <span class="title">评教趋势分析</span>
        <div class="filter-container">
          <el-select 
            v-model="query.semester"
            placeholder="请选择开课学期"
            @change="initCourse"
            class="filter-item"
            clearable
          >
            <el-option 
              v-for="semester in availableSemesters" 
              :key="semester" 
              :value="semester"
              :label="semester"
            />
          </el-select>

          <el-select
          filterable
            v-model="query.subId"
            placeholder="请选择课程"
            @change="initClass"
            class="filter-item"
            clearable
          >
            <el-option
              v-for="(item, index) in courseList"
              :key="index"
              :label="item.courseName"
              :value="item.subId"
            />
          </el-select>

          <el-select
          filterable
            v-model="query.classId"
            placeholder="请选择班级"
            @change="fetchEvaluationData"
            class="filter-item"
            clearable
          >
            <el-option
              v-for="(item, index) in classList"
              :key="index"
              :label="item.className"
              :value="item.classId"
            />
          </el-select>
        </div>
      </div>
    </el-card>
        <!-- 图表展示区域 -->
    <el-card class="chart-card" shadow="hover">
      <div class="chart-container">
        <CombinedCharts :originData="evalData" />
      </div>
    </el-card>
  </div>
  </template>
  
  <script>
  import CombinedCharts from './component/CombinedCharts.vue'
  import { getSemester1 } from '@/api/dashboard'
  import { getCourse,getClass,getEvaluate } from '@/api/txyStudentEvaluation';
  export default {
    components: { CombinedCharts },
    data() {
      return {
        availableSemesters: [], // 改为从后端动态获取
      chartInstance: null,
      query:{
        semester:'',
        subId:'',
        classId:'',
      },
      classQuery:{
        semester:'',
        subId:"",
      },
      courseList:[],//课程列表
      classList:[],//选择的课程id
        evalData: [] // 原始评教数据
      }
    },
    created(){
      getSemester1().then(res=>{
        this.availableSemesters=res.data
      })
    },
    methods:{
        // 获取后端数据
        initCourse(semester){
            getCourse(semester).then(res=>{
            this.courseList=res.data;
            })
        },
        initClass(subId){      
        this.classQuery.subId=subId;
        this.classQuery.semester=this.query.semester;
        getClass(this.classQuery).then(res => {
            this.classList=res.data;
        })
        },
        
        // 获取评教数据
        async fetchEvaluationData() {
        try {
            getEvaluate(this.query).then(res=>{
                this.evalData=res.data
            })

        } catch (error) {
            console.error('评教数据获取失败:', error)
        }
        },
    }
  }
  </script>

<style lang="scss" scoped>
.evaluation-trend-container {
  padding: 20px;
  background: #f5f7fa;
  min-height: calc(100vh - 84px);
  
  .filter-card {
    margin-bottom: 20px;
    border-radius: 8px;
    border: 1px solid #ebeef5;

    .filter-header {
      padding: 18px 20px;
      border-bottom: 1px solid #ebeef5;

      .title {
        font-size: 16px;
        color: #303133;
        font-weight: 600;
        margin-right: 30px;
      }
    }

    .filter-container {
      display: flex;
      align-items: center;
      gap: 15px;
      margin-top: 15px;

      .filter-item {
        width: 240px;
        
        ::v-deep .el-input__inner {
          border-radius: 4px;
          transition: all 0.3s;
          
          &:hover {
            border-color: #409eff;
          }
          
          &:focus {
            border-color: #409eff;
            box-shadow: 0 0 0 2px rgba(64,158,255,.2);
          }
        }
      }
    }
  }

  .chart-card {
    border-radius: 8px;
    
    .chart-container {
      padding: 20px;
      height: 600px;
      background: #fff;
      
      &:deep(.combined-charts) {
        height: 100%;
      }
    }
  }
}

@media (max-width: 768px) {
  .filter-container {
    flex-wrap: wrap;
    
    .filter-item {
      width: 100% !important;
    }
  }
}
</style>